<!DOCTYPE html>
<html class="ui-page-login">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>{$webInfo.sy_website}</title>
	<link href="__mui__/css/mui.min.css" rel="stylesheet" />
	<link href="__static__/css/styleMobile.css" rel="stylesheet" />
	<link href="__static__/css/loginMobile.css" rel="stylesheet" />
</head>

<body>
	<div class="show">
		<div class="show-body">
			<div class="login-bg"></div>
		</div>
		<div class="show-form">
			<div class="form-logo">
				<img src="__static__/images/login/logo-mobile.png" />
			</div>
			<div class="form-logo-text">
				<img src="__static__/images/login/logo-text.png" />
			</div>
			<div class="form-title">{$webInfo.sy_website}</div>
			<form class="login-form">
				<div class="mui-input-row">
					<label><img class="img-user" src="__static__/images/login/user.png"></label>
					<input id='account' type="text" class="mui-input" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label><img class="img-pwd" src="__static__/images/login/password.png"></label>
					<input id='password' type="password" class="mui-input" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label><img class="img-pwd" src="__static__/images/login/code.png"></label>
					<input id="captcha" type="text" maxlength="5" class="mui-input code-input" placeholder="请输入验证码">
					<img id="code" class="form-code" src="{:url('Login/verify')}" onclick="changeCode()" title="点击切换验证码" />
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="onLogin()">登录</button>
			</div>
			<div class="mui-content-padded oauth-area"></div>
		</div>
	</div>

	<script type="text/javascript" src="__mui__/js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="__mui__/js/mui.min.js" charset="utf-8"></script>
	<script>
		//登录验证
		function onLogin(){
			const account = document.querySelector("#account").value;
			const password = document.querySelector("#password").value;
			const code = document.querySelector("#captcha").value;
			if(account == "") {
				mui.toast("用户名不能为空");
				return false
			}
			if(password == "") {
				mui.toast("密码不能为空");
				return false
			}
			if(code == "") {
				mui.toast("验证码不能为空");
				return false
			}
			$.ajax({
				type:"POST",
				url: "{:url('Login/loginCheck')}",
				data: {username:account, password:password, code:code},
				success:function (data) {
					if(data.status === 1){
						mui.alert(data.info, function(){
							window.location.href = data.url;
						});
					}else{
						mui.alert(data.info, function(){
							changeCode(); //切换验证码
						});
					}
				}
			});
		}
		/*切换验证码*/
		function changeCode(){
			const ts = Date.parse(new Date())/1000;
			$('#code').attr("src", "{:url('Login/verify')}?id="+ts);
		}
	</script>
</body>
</html>
